<template>
    <div style="background-color:blanchedalmond">
        <h1>本页面主要展示vue的状态管理</h1>
        <!-- 先创建两个子组件，一个是女儿组件，一个是儿子组件 -->
            <h1>这是我儿子</h1>
        <SonBoy @boy='boyHandle'/>
            <h1>这是我女儿</h1>
        <SonGirl @girl='girlHandle'/>
        <h3>请两位神兽汇报成绩</h3>
        <P>儿子的成绩是: {{boyGrade}},女儿的成绩是：{{girlGrade}}</P>
        <p>我先去看看我的金库还能爆多少米  {{store.money}}</p>
    </div>
</template>
<script>
import SonBoy from '../components/SonBoy'
import SonGirl from '../components/SonGirl'
import {useMyStore} from '../store/myStore.js'
export default{
components:{
    SonBoy,SonGirl
    },
methods: {
    boyHandle(val){
        this.boyGrade=val
    },
    girlHandle(val){
        this.girlGrade=val
    }
},
data() {
    return {
        boyGrade:'',
        girlGrade:'',
        store:useMystore()
        
    }
},
}
</script>